<template>
    <div>
        
        <template v-for="item in routers" >
            <el-submenu v-if="!item.hidden && item.children && item.children.length > 0" :key="item.name" :index="item.path">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{item.name}}</span>
                </template>
                <template v-for="child in item.children" >
                    <sidebar-item v-if="!child.hidden && child.children && child.children.length>0" :routers="[child]" :key="child.name"></sidebar-item>
                    <router-link v-else-if="!child.hidden" :to="child.path" :key="child.name">
                        <el-menu-item :index="child.path">
                            <i class="el-icon-location"></i>
                            <span>{{child.name}}</span>
                        </el-menu-item>
                    </router-link>
                </template>
            </el-submenu>

            <router-link v-else-if="!item.hidden" :to="item.path" :key="item.name">
                <el-menu-item :index="item.path">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.name}}</span>
                    </template>
                </el-menu-item>
            </router-link>

        </template>

    </div>
</template>
<script>
export default {
  name: "SidebarItem",
  props: {
    routers: {
      type: Array
    }
  },
  methods: {}
};
</script>

